<template>
	<div class="langdu">
		<div class="question">
			<div class="title">
				<span >{{ questIndex }}.对话题</span>
			</div>
			<div class="question">
				<template v-for="(item,index) in question.quest.question[0].value" :key = "index">
					<p v-if="item !==''">
						{{ item }}
					</p>
				</template>
				<template v-for="(item,index) in question.quest.subQuestion[0].question" :key ="index">
					<template v-if="item.type ==='text'">
						<p v-for="(item1,index1) in item.value" :key = "index1">
							{{ item1 }}
						</p>
					</template>
					<template v-else-if="item.type==='audio'">
						<div class="iconBox">
							<img src="@/assets/audio.png" @click="handlePlay(item.value)">
						</div>
					</template>
					<template v-else-if="item.type==='picture'">
						<div class="iconBox">
							<el-image
								style="width: 150px; height: 150px"
								:src="item.value"
								:preview-src-list="[String(item.value)]"
								:initial-index="0"
								fit="contain"
							/>
						</div>
					</template>
					<template v-else-if="item.type==='video'">
						<div class="iconBox">
							<video controls width="250">
								<source :src="item.value" type="video/webm"/>
							</video>
						</div>
					</template>
				</template>
				<div class="content">
					<template v-for="(item,index) in question.quest.subQuestion[0].content.value" :key = "index">
						<p v-if="item !==''">
							<span v-if="index % 2 === 0">A：</span><span v-else>B：</span>{{ item }}
						</p>
					</template>
				</div>
				<div class="answer">
					<span class="answerIcon">
						<span @click="openDialog('audio',0)">
							<el-icon><Microphone/></el-icon>
						</span>
					</span>
					<div class="content">
						<span class="audioAnswer" v-if="state.answer1" @click.stop="handlePlay(state.answer1)">
								<el-icon><Headset /></el-icon>
						</span>
						<span class="tips">
							答案：
						</span>
					</div>
				</div>
			</div>
		</div>
		<el-dialog
			v-model="state.dialogVisible"
			title="题目作答"
			width="500"
			draggable
			destroy-on-close
			:show-close="false"
		>
			<div v-if="state.dialogType === 'audio'">
				<Recoder :questionIndex="seq" :answerIndex="state.answerIndex"></Recoder>
			</div>
			<template #footer>
				<div class="dialog-footer" v-if="state.dialogType!=='writer'">
					<el-button @click="state.dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="setUserAnswer()">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>

	</div>
</template>
<script setup lang="ts">

import {toRefs, defineProps, reactive, onMounted, PropType, Ref} from 'vue'
import {Headset, Microphone, Service} from "eleicon";
import {useDataStore} from "@/stores/useDataStore";
import Recoder from "@/components/Recoder/Recoder.vue";
import Bus from "@/utils/bus";

const props = defineProps({
	//子组件接收父组件传递过来的值
	question: {
		type: Object as PropType<{ quest: {subQuestion: Array<any>,question: Array<any>}, seqNum: number }>,
	},
	questIndex: {
		type: Number
	},seq: {
		type: Number
	}
})

const { question,questIndex,seq } = toRefs(props) as { question: Ref<{ quest: { subQuestion: Array<any> ,question: Array<any>}, seqNum: number }>, questIndex: Ref<number>,seq: Ref<number>}

onMounted(() => {
	Bus.on('uploadAudio' + seq.value, (data:any) => {
		state.readNum++;
		state.answer = getRealUrl(data.answer)
		state.answer1 = data.answer
	})
})
const userAnswerState = useDataStore();

const state = reactive({
	dialogType: '',
	dialogVisible: false,
	answerIndex: 0,
	answer: '',
	answer1: '',
	playNum: 0,
	readNum: 0
})
const handlePlay = (source: string) => {
	setUserAnswer();
	if (userAnswerState.currentAudio) {
		userAnswerState.currentAudio.pause(); // 暂停当前音频
		userAnswerState.currentAudio = null; // 释放当前音频
	}

	userAnswerState.currentAudio = new Audio(source) as any; // 创建新的 Audio 对象
	userAnswerState.currentAudio?.play(); // 播放音频
}

const openDialog = (type: string, index1: number) => {
	state.dialogType = type;
	state.answerIndex = index1;
	state.dialogVisible = true;
}

const setUserAnswer = () => {

	const info  = {
		userRole: 'A&B',
		stuId: "",
		data: [{
			playNum: state.playNum,
			readNum: state.readNum,
			readScore: 0,
			recogRet: '识别服务未开启，未识别内容'
		}],
	}

	const score  = 0;
	const readLog: never[] = [];

	const payload = {
		template: question?.value?.quest.subQuestion[0].template,
		info: info,
		score: score,
		audio: state.answer,
		readLog: readLog
	};
	userAnswerState.setUserAnswer(payload, seq.value-1);
	console.log(userAnswerState.userAnswer)
	state.dialogVisible = false
}

const getRealUrl = (url:string) => {
	return url.split('/')[url.split('/').length-2]+'/'+url.split('/')[url.split('/').length-1];
}

</script>
<style scoped lang="scss" >
.langdu {
	img {
		width: 30px;
		height: 30px;
		object-fit: contain;
	}

	.question {
		margin-bottom: 20px;

		.title {
			font-size: 20px;
			font-weight: 500;
			margin-bottom: 10px;
			color: #6a727f;
		}
		.dot {
			font-weight: 700;
			color: #5189dd;
			margin-right: 5px;
		}

		.question {
			font-size: 18px;
			color: #7c7787;
			text-indent: 2em;
			.content {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 20px;
			}

			.iconBox {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 20px;
				text-indent: 0;
				.icon {
					margin-top: 20px;
					margin-bottom: 20px;
					font-size: 30px;
				}

			}
			.answer {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 20px;
				justify-content: center;
				.answerIcon {
					text-indent: 0;
					font-size: 30px;
				}
				.content {
					width: 95%;
					position: relative;
					height: 50px;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #dcdfe6;
					text-indent: 0;
					.audioAnswer {
						font-size: 30px;
						cursor: pointer;
					}
					.tips {
						position: absolute;
						left: 0;
						top: 0;
					}
				}
			}

		}

	}

	.option {
		display: flex;
		justify-content: center;
	}
}

</style>